<template>
  <div class="dialogBox">
    <el-dialog
      ref="dialogRef"
      v-if="dialogVisible"
      v-model="dialogVisible"
      :title="title"
      :width="width"
      :close-on-click-modal="false"
      :close-on-press-escape="closeESC"
      @close="closeDialog"
      v-bind="$attrs"
      :top="top"
      class="dialog"
    >
      <!-- v-bind="$attrs" -->
      <slot></slot>
      <template #footer v-if="showFoot">
        <span class="dialog-footer">
          <el-button @click.stop="closeDialog" v-if="showCancel">
            {{ cancelText }}
          </el-button>
          <el-button
            type="primary"
            @click="confirmDialog"
            :disabled="confirmAbled"
          >
            {{ confirmText }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";
import { debounce } from "lodash-es";

const dialogRef = ref();
const props = defineProps({
  title: {
    type: String,
    default: "标 题",
  },
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "50%",
  },
  top: {
    type: String,
    default: "10vh",
  },
  cancelText: {
    type: String,
    default: "取 消",
  },
  confirmText: {
    type: String,
    default: "确 认",
  },
  // 是否显示底部操作
  showFoot: {
    type: Boolean,
    default: true,
  },
  // 是否显示取消按钮
  showCancel: {
    type: Boolean,
    default: true,
  },
  // 是否可点击esc退出按钮关闭弹窗
  closeESC: {
    type: Boolean,
    default: true,
  },
  // 是否禁用确认按钮
  confirmAbled: {
    type: Boolean,
    default: false,
  },
});

const { title, dialogVisible, width } = toRefs(props);

const emit = defineEmits(["close", "confirm"]);
// 关闭弹窗
const closeDialog = () => {
  emit("close");
};

// 确认
const confirmDialog = debounce(() => {
  emit("confirm");
}, 200);

defineExpose({
  dialogRef,
  dialogVisible,
});
</script>

<style lang="scss" scoped>
.dialogBox {
  :deep(.el-dialog__close) {
    font-size: 24px;
  }

  :deep(.el-table__inner-wrapper) {
    height: 100% !important;
  }
}
</style>
